<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-form
        ref="formRef"
        class="mb-[-16px]"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item>
          <el-input
            class="w-[280px]"
            v-model="queryParams.keyword"
            placeholder="关键词"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-select
            placeholder="角色模型"
            class="w-[280px]"
            v-model="queryParams.other_id"
          >
            <el-option
              v-for="(item, key) in roleModelList"
              :key="key"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            placeholder="对话模型"
            class="w-[280px]"
            v-model="queryParams.chat_model_id"
          >
            <el-option
              v-for="(item, key) in dialogueModelList"
              :key="key"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never">
      <el-table
        stripe
        class="mt-2"
        size="large"
        v-loading="pager.loading"
        :data="pager.lists"
      >
        <el-table-column label="输入信息" prop="ask" />
        <el-table-column label="使用角色" prop="other_desc" />
        <el-table-column label="对话模型" prop="model" />
        <el-table-column label="提问时间" prop="create_date" />

        <el-table-column label="操作" min-width="40" fixed="right">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-button plain type="primary" @click="gotoDeatil(row)">
                查看回复
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination
          v-model="pager"
          @change="getLists"
          background="red"
          layout="prev, pager, next, sizes"
        />
      </div>
    </el-card>

    <view-reply
      v-if="popShow"
      ref="addUserPopRef"
      @close="popShow = false"
      :popContent="popContent"
    />
  </div>
</template>
<script lang="ts" setup name="consumerLists">
import { usePaging } from "@/hooks/usePaging";
import {
  getHistoryList,
  getRoleModelList,
  getDialogueModelList,
} from "@/api/consumer";
import { useRequest } from "vue-hooks-plus";
import viewReply from "../../../modals/viewReply.vue";

//弹框ref
const addUserPopRef = shallowRef();

const router = useRouter();

const popShow = ref(false);

const popContent = ref("");

// 获取当前的url ?后面的参数
const route = useRoute();

const queryParams = reactive({
  //   student_id: 1,
  keyword: "",
  other_id: "",
  chat_model_id: "",
});

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getHistoryList,
  params: queryParams,
});

// 获取角色模型
const { data: roleModelList } = useRequest(async () => {
  const _res = await getRoleModelList({ page: 1, limit: 9999 });

  return _res.data?.map((_item) => {
    return {
      value: _item.id,
      label: _item.name,
    };
  });
});

const { data: dialogueModelList } = useRequest(async () => {
  const _res = await getDialogueModelList({ page: 1, limit: 9999 });

  return _res.data?.map((_item) => {
    return {
      value: _item.id,
      label: _item.name,
    };
  });
});

onActivated(() => {
  getLists();
});

console.log("route?.query?.id,");

getLists();

// 路由跳转
const gotoDeatil = async (data) => {
  popShow.value = true;
  popContent.value = data?.reply;
  await nextTick();
  addUserPopRef.value.open();
};
</script>

<style lang="scss" scoped></style>
